import React from 'react';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import css from './index.less';
import { Button, Icon } from 'antd';
import Event from './event';
import { KEYS } from 'common/const/events';

@observer
export default class Events extends React.Component {

  static propTypes = {
    mod: PropTypes.object.isRequired,
  };

  renderList() {
    const { mod, mod: { events = [] } } = this.props;
    if (!events.length) {
      return (
        <div className={css.placeholder}>
          暂无事件
        </div>
      );
    }
    return (
      events.map((event, index) => {
        const _props = {
          mod,
          event,
          key: index,
        };
        return (
          <Event {..._props} />
        );
      })
    );
  }

  renderAddBtn() {
    const { mod, mod: { events = [] } } = this.props;
    if (events.length === KEYS.length) {
      return null;
    }
    return (
      <div className={css.addBtn}>
        <Button onClick={() => mod.addEvent()}>
          <Icon type="plus-square" /> 添加事件
        </Button>
      </div>
    );
  }

  render() {
    return (
      <div className={css.events}>
        {this.renderList()}
        {this.renderAddBtn()}
      </div>
    );
  }
}
